import React, { useState, useEffect } from "react";
import "./index.css";

const Demo1: React.FC = () => {
  let context: CanvasRenderingContext2D | null = null;

  const parint = () => {
    const canvas: HTMLElement = document.getElementById("canvas");

    if (context) return;

    context = canvas.getContext("2d");

    var text = "XXX专用章";
    var companyName = "XXX科技股份有限公司";

    // 绘制印章边框
    var width = canvas.width / 2;
    var height = canvas.height / 2;
    context.lineWidth = 5;
    context.strokeStyle = "#f00";
    context.beginPath();
    context.arc(width, height, 90, 0, Math.PI * 2); //宽、高、半径
    context.stroke();

    //画五角星
    // create5star(context, width, height, 25, "#f00", 0);

    // 绘制印章名称
    context.font = "20px 宋体";
    context.textBaseline = "middle"; //设置文本的垂直对齐方式
    context.textAlign = "center"; //设置文本的水平对对齐方式
    context.lineWidth = 1;
    context.strokeStyle = "#f00";
    context.strokeText(text, width, height + 60);

    // 绘制印章单位
    context.translate(width, height); // 平移到此位置,
    context.font = "23px 宋体";
    var count = companyName.length; // 字数
    var angle = (4 * Math.PI) / (3 * (count - 1)); // 字间角度
    var chars = companyName.split("");
    var c;
    for (var i = 0; i < count; i++) {
      c = chars[i]; // 需要绘制的字符
      if (i == 0) {
        context.rotate((5 * Math.PI) / 6);
      } else {
        context.rotate(angle);
      }

      context.save();
      context.translate(70, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
      context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
      context.strokeText(c, 0, 0); // 此点为字的中心点
      context.restore();
    }
  };
  useEffect(() => {
    parint();
    // return () => {
    //   context = null;
    // };
  }, []);

  //绘制五角星
  function create5star(context, sx, sy, radius, color, rotato) {
    context.save();
    context.fillStyle = color;
    context.translate(sx, sy); //移动坐标原点
    context.rotate(Math.PI + rotato); //旋转
    context.beginPath(); //创建路径
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = (Math.PI / 5) * 4;
    for (var i = 0; i < 5; i++) {
      //画五角星的五条边
      var x = Math.sin(i * dig);
      var y = Math.cos(i * dig);
      context.lineTo(x * radius, y * radius);
    }
    context.closePath();
    context.stroke();
    context.fill();
    context.restore();
  }
  return (
    <>
      <div className="seal-content">
        通过的内容 通过的内容 通过的内容 通过的内容 通过的内容 通过的内容
        通过的内容 通过的内容 通过的内容 通过的内容 通过的内容
        <div className="seal-result">通过</div>
      </div>

      <div className="seal-content">
        不通过的内容 不通过的内容 不通过的内容 不通过的内容 不通过的内容
        不通过的内容 不通过的内容 不通过的内容 不通过的内容 不通过的内容
        <div className="seal-result seal-result-fail">不通过</div>
      </div>

      <div className="seal-content">
        <img
          src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=61180a57a3014c080d3620f76b12696d/d6ca7bcb0a46f21f3635d9adfc246b600d33aecf.jpg"
          width="300"
        />
        <div className="seal-result seal-result-fail">不通过</div>
      </div>

      <canvas id="canvas" width="200" height="200"></canvas>
    </>
  );
};

const Demo2: React.FC = () => {
  const testFn = (args: any) => {
    console.log("3333", args);
  };
  useEffect(() => {
    testFn(11);
  }, []);
};

export default React.FC = () => {
  return (
    <div>
      <Demo1 />
      <Demo2 />
    </div>
  );
};
